<template>
  <ScenicScreen v-model="list.filter.scenicId">
    <div class="app-container">
      <el-form
        ref="listFilterRef"
        :model="list.filter"
        inline
        class="list-filter"
      >
        <el-form-item prop="areaCode">
          <RegionSelect
            v-model="list.filter.areaCode"
            :props="{
              checkStrictly: true,
            }"
          />
        </el-form-item>
        <el-form-item prop="reservationType">
          <KiSelect
            v-model="list.filter.reservationType"
            :options="reservationTypeOptions"
            placeholder="预约模式"
          />
        </el-form-item>
        <el-form-item prop="status">
          <KiSelect
            :index.sync="list.filter.status"
            :options="['停用', '启用']"
            placeholder="状态"
          />
        </el-form-item>
        <el-button @click="reset">重置</el-button>
      </el-form>

      <div class="table-operation">
        <span>
          <el-button
            v-if="hasBtn['新增']"
            type="primary"
            icon="el-icon-circle-plus-outline"
            @click="c"
          >
            新增
          </el-button>
          <ExportExcel
            url="/sot-admin-api/reservation/reservation-info/downloadList"
            :param="list.filter"
          />
        </span>
        <el-pagination
          v-bind="elPaginationProps"
          :total="list.total"
          :currentPage.sync="list.filter.pageNo"
          :pageSize.sync="list.filter.pageSize"
        />
      </div>

      <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
        <el-table-column align="center" type="index" />
        <el-table-column label="景区名称" prop="scenicName" />
        <el-table-column label="预约模式" width="150">
          <template slot-scope="{ row }">
            {{ row.reservationType | $value2label(reservationTypeOptions) }}
          </template>
        </el-table-column>
        <el-table-column
          label="所属地区"
          prop="areaName"
          v-if="userInfo && userInfo.userType == 0"
        />
        <el-table-column
          label="展示顺序"
          prop="sort"
          width="80"
          v-if="userInfo && userInfo.userType == 0"
        />
        <el-table-column label="状态" align="center" width="100">
          <template slot-scope="{ row: { id, status } }">
            <KiPopSwitch
              v-bind="popSwitchProps(status)"
              @change="updateStatus({ id, status: status ^ 1 })"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="400">
          <template
            slot-scope="{
              row: { scenicName, id, sort, ycProductStatus, showAreaProduct },
            }"
          >
            <KiPopButton v-if="hasBtn['查看']" @click="r({ id })">
              查看
            </KiPopButton>
            <KiPopButton v-if="hasBtn['编辑']" @click="u({ id })">
              编辑
            </KiPopButton>
            <KiPopButton
              v-if="hasBtn['设置预约模式']"
              @click="changeReservationType(id)"
            >
              设置预约模式
            </KiPopButton>
            <KiPopButton
              v-if="hasBtn['设置展示顺序']"
              @click="showOrderModel({ scenicName, id, sort })"
            >
              设置展示顺序
            </KiPopButton>
            <KiPopButton
              v-if="hasBtn['推荐商品设置']"
              @click="
                showYunCangModel({
                  scenicName,
                  id,
                  ycProductStatus,
                  showAreaProduct,
                })
              "
            >
              推荐商品设置
            </KiPopButton>
          </template>
        </el-table-column>
      </el-table>

      <KiFormDialog
        :show.sync="form.show"
        :title="formTitle"
        v-model="form.data"
        :submit="submitForm"
        :readonly="form.status === 'r'"
        ref="formRef"
        :loading="form.loading"
      >
        <template #el-form>
          <el-form-item
            label="温馨提示"
            prop="tips"
            :verify="{ required: false, maxLength: 500 }"
          >
            <el-input
              v-model="form.data.tips"
              type="textarea"
              :autosize="{ minRows: 3 }"
              show-word-limit
              clearable
            />
          </el-form-item>
          <div
            v-show="
              form.data.reservationType && form.data.reservationType !== 4
            "
          >
            <el-form-item label="可预约天数" prop="limitDays" verify>
              <Sort
                v-model="form.data.limitDays"
                :max="27"
                placeholder="请输入可预约天数"
              />
            </el-form-item>
            <el-form-item label="提前预约天数" prop="aheadDays" verify>
              <Sort
                v-model="form.data.aheadDays"
                :min="0"
                :max="7"
                placeholder="请输入提前预约天数"
              />
            </el-form-item>
            <el-form-item
              label="最高可携带老人或小孩数量"
              prop="maxPersonNum"
              verify
            >
              <Sort
                v-model="form.data.maxPersonNum"
                :max="10"
                placeholder="请输入最高可携带老人或小孩数量"
              />
            </el-form-item>
            <el-form-item
              label="是否需要核销二维码入园"
              prop="needConsumer"
              verify
            >
              <el-switch
                v-model="form.data.needConsumer"
                :active-value="1"
                :inactive-value="0"
                active-color="#13ce66"
              ></el-switch>
            </el-form-item>
            <el-form-item label="限制不允许预约地区" prop="limitAreaCodes">
              <AllRegionSelect
                v-model="form.data.limitAreaCodes"
                :props="{
                  checkStrictly: true,
                  multiple: true,
                }"
              />
            </el-form-item>
            <h2 style="margin-top: 40px">场次</h2>
            <draggable
              v-model="form.data.sessionList"
              :animation="500"
              filter="input,textarea,.el-rate"
              :preventOnFilter="false"
            >
              <div
                v-for="(item, index) of form.data.sessionList"
                :key="item.id || item.__key"
              >
                <div class="round" cursor="move">
                  <h3>场次{{ index + 1 }}</h3>
                  <i
                    class="el-icon-circle-close"
                    @click="form.data.sessionList.splice(index, 1)"
                    v-show="
                      form.status !== 'r' && form.data.sessionList.length > 1
                    "
                  />
                  <el-form-item
                    label="场次时间"
                    :prop="'sessionList.' + index + '.endTime'"
                    verify
                  >
                    <time-range-picker
                      :start.sync="item.beginTime"
                      :end.sync="item.endTime"
                      type="time"
                    />
                  </el-form-item>
                  <el-form-item
                    label="场次库存"
                    :prop="'sessionList.' + index + '.limitNum'"
                    verify
                  >
                    <Sort
                      v-model="item.limitNum"
                      :max="1000000"
                      placeholder="请输入场次库存"
                    />
                  </el-form-item>
                  <el-form-item
                    label="使用日"
                    :prop="'sessionList.' + index + '.canUseDays'"
                    verify
                  >
                    <CheckAllBox
                      v-model="item.canUseDays"
                      :options="[
                        { value: '1', label: '周一' },
                        { value: '2', label: '周二' },
                        { value: '3', label: '周三' },
                        { value: '4', label: '周四' },
                        { value: '5', label: '周五' },
                        { value: '6', label: '周六' },
                        { value: '7', label: '周日' },
                      ]"
                      :props="{ label: 'label', value: 'value' }"
                      :disabled="form.status === 'r'"
                    />
                  </el-form-item>
                  <el-form-item
                    label="不可使用日"
                    :prop="'sessionList.' + index + '.unavailableDates'"
                  >
                    <el-date-picker
                      type="dates"
                      v-model="item.unavailableDates"
                      value-format="yyyy-MM-dd"
                      placeholder="请选择不可使用日"
                    />
                  </el-form-item>
                </div>
              </div>
            </draggable>
            <el-button
              @click="form.data.sessionList.push({ __key: uuidv4() })"
              v-show="form.status !== 'r' && form.data.sessionList.length < 20"
              style="width: 100%"
              round
              plain
              type="primary"
            >
              + 增加场次
            </el-button>
          </div>
        </template>
      </KiFormDialog>

      <KiFormDialog
        :show.sync="reservationTypeModel.show"
        title="预约模式"
        :retrieve="reservationTypeGetter"
        :submit="reservationTypeSubmit"
        v-model="reservationTypeModel.data"
      >
        <template #el-form>
          <el-form-item prop="reservationType" label="预约模式设置"  verify>
            <KiSelect
              v-model="reservationTypeModel.data.reservationType"
              :options="reservationTypeOptions"
            />
          </el-form-item>
          <template
            v-if="[3, 4].includes(reservationTypeModel.data.reservationType)"
          >
          <el-form-item label="旋转预约页面关联店铺的票务商品">

            <el-select
              v-model="reservationTypeModel.data.productIdList"
              multiple
              placeholder="请选择"
            >
              <el-option
                v-for="item in reservationTypeModel.productIdList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
            </el-form-item>
            <!-- {{ reservationTypeModel.productIdList }} -->
          </template>
        </template>
      </KiFormDialog>

      <!-- 设置展示顺序 -->
      <KiFormDialog
        :show.sync="orderModel.show"
        title="设置展示顺序"
        :submit="orderSubmit"
        v-model="orderModel.data"
      >
        <template #el-form>
          <el-form-item label="景区名称">
            <el-input v-model="orderModel.data.scenicName" disabled />
          </el-form-item>
          <el-form-item label="展示顺序" prop="sort" verify>
            <Sort
              v-model="orderModel.data.sort"
              :max="9999"
              placeholder="请输入展示顺序"
            />
          </el-form-item>
        </template>
      </KiFormDialog>

      <!-- 推荐商品设置 -->
      <KiFormDialog
        :show.sync="yunCang.show"
        title="推荐商品设置"
        :submit="yunCangSubmit"
        v-model="yunCang.data"
      >
        <template #el-form>
          <el-form-item label="景区名称">
            <el-input v-model="yunCang.data.scenicName" disabled />
          </el-form-item>
          <el-form-item label="是否展示云仓商品" prop="ycProductStatus" verify>
            <KiSelect
              v-model="yunCang.data.ycProductStatus"
              :options="[
                { dataName: '是', dataValue: 1 },
                { dataName: '否', dataValue: 0 },
              ]"
              placeholder="请选择是否展示云仓商品"
            />
          </el-form-item>
          <el-form-item label="是否展示地区商品" prop="showAreaProduct" verify>
            <KiSelect
              v-model="yunCang.data.showAreaProduct"
              :options="[
                { dataName: '是', dataValue: 1 },
                { dataName: '否', dataValue: 0 },
              ]"
              placeholder="请选择是否展示州市商品"
            />
          </el-form-item>
        </template>
      </KiFormDialog>
    </div>
  </ScenicScreen>
</template>

<script>
import pageMixin from "@/utils/pageMixin";
import useAdmateAdapter from "@/utils/useAdmateAdapter";
import { getUserInfo } from "@/utils/auth";
import ScenicScreen from "@/components/ScenicScreen";
import draggable from "vuedraggable";
import { v4 as uuidv4 } from "uuid";

export default {
  mixins: [pageMixin],
  components: { ScenicScreen, draggable },
  setup: () =>
    useAdmateAdapter({
      urlPrefix: "sot-admin-api/reservation/reservation-info",
      form: {
        data: {
          sessionList: [{}, {}, {}],
          aheadDays: 0,
        },
      },
    }),
  data() {
    return {
      userInfo: getUserInfo(),
      reservationTypeModel: {
        show: false,
        data: {
          reservationType: null,
        },
      },
      orderModel: {
        show: false,
        data: { sort: "" },
      },
      yunCang: {
        show: false,
        data: { ycProductStatus: "", showAreaProduct: "" },
      },
      reservationTypeOptions: [
        {
          dataValue: 1,
          dataName: "直接预约",
        },
        {
          dataValue: 3,
          dataName: "先预约后购票",
        },
        {
          dataValue: 4,
          dataName: "直接购票",
        },
      ],
      scenicList: [],
      options: {
        scenic: [],
      },
    };
  },
  methods: {
    uuidv4,
    showYunCangModel({ scenicName, id, ycProductStatus, showAreaProduct }) {
      this.yunCang.data.scenicName = scenicName;
      this.yunCang.data.id = id;
      this.yunCang.data.ycProductStatus = ycProductStatus;
      this.yunCang.data.showAreaProduct = showAreaProduct;
      this.yunCang.show = true;
    },
    showOrderModel({ scenicName, id, sort }) {
      this.orderModel.data.scenicName = scenicName;
      this.orderModel.data.id = id;
      this.orderModel.data.sort = sort || "";
      this.orderModel.show = true;
    },
    orderSubmit() {
      return this.$POST(
        "sot-admin-api/reservation/reservation-info/setSort",
        this.orderModel.data
      ).then(() => {
        this.getList();
      });
    },
    yunCangSubmit() {
      return this.$POST(
        "sot-admin-api/reservation/reservation-info/setProductShowStatus",
        this.yunCang.data
      ).then(() => {
        this.getList();
      });
    },
    changeReservationType(id) {
      this.reservationTypeModel.show = true;
      this.reservationTypeModel.data.id = id;
    },
    reservationTypeGetter() {
      return this.$POST(
        "sot-admin-api/reservation/reservation-info/queryForDetail",
        {
          id: this.reservationTypeModel.data.id,
        }
      ).then(({ data }) => {
        this.reservationTypeModel.data.reservationType = data.reservationType;
        this.$set(
          this.reservationTypeModel.data,
          "productIdList",
          data.productIdList
        );
        // this.reservationTypeModel.data.productIdList = data.productIdList;
        this.queryProductListNoPermission(data.relateShops);
      });
    },
    queryProductListNoPermission(ids) {
      if (ids?.length) {
        this.$POST("sot-admin-api/product/base/queryProductListNoPermission", {
          subMchIds: ids,
          businessTypeIds: [1],
        }).then(({ data }) => {
          console.log("data", data);
          this.$set(this.reservationTypeModel, "productIdList", data);
        });
      } else {
        this.$set(this.reservationTypeModel, "productIdList", []);
      }
    },
    reservationTypeSubmit() {
      return this.$POST(
        "sot-admin-api/reservation/reservation-info/updateReservationType",
        this.reservationTypeModel.data
      ).then(() => {
        this.getList();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.round {
  border: 1px solid lightgrey;
  border-radius: 16px;
  margin-bottom: 16px;
  padding: 16px;
  position: relative;

  h3 {
    text-align: center;
    margin-bottom: 32px;
  }

  i {
    position: absolute;
    font-size: 32px;
    right: 16px;
    top: 16px;
    cursor: pointer;
  }
}
</style>
